<template>
  <div id="test-container">
    <h3 id="h3text">Test-Vue组件----有{{ books.length }}本书</h3>
    <p id="ppp">message的值是{{ message }}</p>
    <button @click="message += '修改后'">修改message的值</button>
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      message: "hello vue!",
      books: [],
    };
  },
  methods: {
    show() {
      console.log("这是show方法");
    },
    // ajax请求
    initBookList() {
      const xml = new XMLHttpRequest();
      xml.addEventListener("load", () => {
        const result = JSON.parse(xml.responseText);
        console.log(result);
        this.books = result.data;
      });
      xml.open("GET", "http://www.liulongbin.top:3006/api/getbooks");
      xml.send();
    },
  },
  // 创建生命周期的函数
  // create生命周期函数，非常常用,它可以调用data数据，methods方法请求服务器的数据，话可以将请求的数据转存到template模板中使用。
  created() {
    // console.log(this.info);
    // console.log(this.message);
    // this.show();
    this.initBookList();
  },
  beforeMount() {
    // const dm = document.querySelector('#h3text')
    // console.log(dm)
  },
  //如果要操作当前组件的dom，最早只能在mounted阶段中去执行。
  mounted() {
    // console.log(this.$el)
    // const dm = document.querySelector('#h3text')
    // console.log(dm)
  },
  // 数据每更新一次就触发
  beforeUpdate() {
    // console.log("beforeUpdate")
    // const dm = document.querySelector('#ppp')
    // console.log(dm)
  },
  // 当数据变化之后，为了能操作到最新的Dom结构，必须把代码写道updated声明周期中
  updated() {
    // console.log("UpdatedS")
    // const dm = document.querySelector('#ppp')
    // console.log(dm)
  },
  beforeDestroy() {
    console.log(this.message);
  },
};
</script>

<style lang="less">
#test-container {
  background-color: pink;
  height: 200px;
}
</style>